﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CourseManage.aspx.cs" Inherits="CMSWCSFSolution.CMS.Views.CourseManage"
    Title="CourseMaster" MasterPageFile="~/Shared/DefaultMaster.master" %>

<asp:Content ID="headContent" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../Scripts/cupertino/jquery-ui-1.8.24.custom.css" rel="stylesheet" type="text/css" />
    <link href="../Scripts/cupertino/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../Scripts/cupertino/grid.locale-en.js" type="text/javascript"></script>
    <script src="../Scripts/cupertino/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Validate for Input CourseName
        $(function () {
            $("#mainForm").validate();
            $("#CourseNameTextBox").rules("add",
        {
            maxlength: 10
        }
        );
        });
        //Add JqGrid Control
        $(function () {
            jQuery("#GridTable").jqGrid({
                url: "CourseManage.aspx?action=init",
                type: 'POST',
                datatype: "json",
                colNames: ['CourseId', 'CourseName', 'TeacherName', 'LevelName', 'CourseStatus'],
                colModel: [
                { name: 'CourseId', index: 'CourseId', sorttype: "int", width: 100 },
                { name: 'CourseName', index: 'CourseName', width: 100 },
                { name: 'TeacherName', index: 'TeacherName', width: 100 },
                { name: 'LevelName', index: 'LevelName', width: 100 },
                { name: 'CourseStatus', index: 'CourseStatus', width: 100 }
                ],
                jsonReader: {
                    root: "griddata",
                    total: "totalpages",
                    page: "page",
                    records: "totalrecords",
                    repeatitems: false
                },
                height: "100%",
                viewrecords: true,
                rowNum: 5,
                multiselect: true,
                sortable: false,
                pager: "#Pager",
                caption: "Course List",
                sortable: false,
                pgbuttons: true
            }).navGrid('#Pager', { add: false, edit: false, del: false, search: false, refresh: false })
            .navButtonAdd('#Pager', { caption: "", buttonicon: "ui-icon ui-icon-plus", onClickButton: function () { Add(); } })
            .navButtonAdd('#Pager', { caption: "", buttonicon: "ui-icon ui-icon-pencil", onClickButton: function () { Edit(); } })
            .navButtonAdd('#Pager', { caption: "", buttonicon: "ui-icon ui-icon-trash", onClickButton: function () { Delete(); } })
            .navButtonAdd('#Pager', { caption: "Batch Close", buttonicon: "ui-icon-edit", onClickButton: function () { BatchClose(); } });
        });
        function Add() {
            window.location.href = "SaveCourse.aspx";
        };
        function Edit() {
            var selectId = jQuery("#GridTable").jqGrid('getGridParam', 'selrow');
            var course = jQuery("#GridTable").jqGrid('getRowData', selectId);
            var courseId = course.CourseId;
            if (courseId != null) {
                window.location.href = "SaveCourse.aspx?courseid=" + courseId;
            }
            else {
                ShowWarning("Please select a row");
            }
        };
        //Delete course
        function Delete() {
            var selectId = jQuery("#GridTable").jqGrid('getGridParam', 'selrow');
            var course = jQuery("#GridTable").jqGrid('getRowData', selectId);
            var courseId = course.CourseId;
            if (courseId == null) {
                ShowWarning("Please select a row");
            }
            else {
                DeleteConfirm();
            }
        };
        //BatchCloseCourse Function
        function BatchClose() {
            var selectIds = jQuery("#GridTable").jqGrid('getGridParam', 'selarrrow');
            var courseList = new Array(selectIds.length);
            for (var i = 0; i < selectIds.length; i++) {
                var course = jQuery("#GridTable").jqGrid('getRowData', selectIds[i]);
                courseList[i] = course.CourseId;
            }
            if (courseList.toString() == "") {
                ShowWarning("Please select a row");
            }
            else {
                $("#GridTable").jqGrid('setGridParam', {
                    url: "CourseManage.aspx",
                    postData: { 'action': "batch", 'courseidList': courseList.toString() }
                }).trigger("reloadGrid");
                $("#GridTable").jqGrid('setGridParam', {
                    url: "CourseManage.aspx",
                    postData: { 'action': "search" }
                });
            }
        };
        //SearchFunction
        $(function () {
            jQuery("#SearchButton").click(function () {
                var coursename = jQuery("#CourseNameTextBox").val();
                var open = jQuery("#OpenCheckBox").attr("checked");
                var closed = jQuery("#ClosedCheckBox").attr("checked");
                $("#GridTable").jqGrid('setGridParam', {
                    url: "CourseManage.aspx",
                    postData: { 'action': "search", 'coursename': coursename, 'open': open, 'closed': closed },
                    page: 1
                }).trigger("reloadGrid");
            });
        });

    </script>
</asp:Content>
<asp:Content ID="content" ContentPlaceHolderID="DefaultContent" runat="Server">
    <h1>
        CourseMaster</h1>
    <script src="../Scripts/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
    <script src="../Scripts/CMS_dialog.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Show Warning Dialog Function
        function ShowWarning(message) {
            $("#dialog_warning").dialog({
                autoOpen: false,
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
            $("#dialog_warning").html(message);
            $("#dialog_warning").dialog("open");
        }
        //Show Delete Confirm Dialog Function
        function DeleteConfirm() {
            $("#dialog_warning").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Confirm": function () {
                        var selectId = jQuery("#GridTable").jqGrid('getGridParam', 'selrow');
                        var course = jQuery("#GridTable").jqGrid('getRowData', selectId);
                        var courseId = course.CourseId;
                        var courseStatus = course.CourseStatus;
                        if (courseStatus == "Open") {
                            ShowWarning("Open Course cannot be deleted!");
                        }
                        else {
                            $("#GridTable").jqGrid('setGridParam', {
                                url: "CourseManage.aspx",
                                postData: { 'action': "delete", 'courseId': courseId }
                            }).trigger("reloadGrid");
                            $("#GridTable").jqGrid('setGridParam', {
                                url: "CourseManage.aspx",
                                postData: { 'action': "search" }
                            });
                            $(this).dialog("close");
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
            $("#dialog_warning").html("Are you sure to delete");
            $("#dialog_warning").dialog("open");
        }
    </script>
    <div>
        <fieldset id="SearchFieldset" runat="server">
            <legend>Search Course</legend>
            <table style="width: 90%;">
                <tr>
                    <td class="style2">
                        <asp:Label ID="CourseNameLabel" runat="server" Text="Course Name"></asp:Label>
                        <asp:TextBox ID="CourseNameTextBox" runat="server" ClientIDMode="Static" Width="85px"></asp:TextBox>
                    </td>
                    <td class="style3">
                        <asp:Label ID="StatusLabel" runat="server" Text="Course Status"></asp:Label>
                        <input type="checkbox" id="OpenCheckBox" value="Open" />Open
                        <input type="checkbox" id="ClosedCheckBox" value="Closed" />Closed
                    </td>
                    <td class="style1">
                        <input type="button" value="Search" id="SearchButton" />
                    </td>
                </tr>
            </table>
        </fieldset>
        <fieldset id="ListFieldset" runat="server">
            <legend>Course List</legend>
            <table id="GridTable">
            </table>
            <div id="Pager">
            </div>
        </fieldset>
    </div>
    <style type="text/css">
        .style1
        {
            height: 58px;
            width: 20%;
        }
        .style2
        {
            height: 58px;
            width: 43%;
        }
        .style3
        {
            height: 58px;
            width: 47%;
        }
        #SearchButton
        {
            margin-left: 4px;
        }
    </style>
</asp:Content>
